<template>
  <div>
    <div class="title"><image src="/static/back.svg" class="back" mode="widthFix" /></div>
    <div class="search_top">
      <image src="/static/search.svg" class="search_topbt" mode="widthFix" />
      <input class="search_topi" placeholder="搜索文章或杂志、作者">
    </div>

    <div class="search_nav">
      <span>目录</span>
      <span class="active">作者列表</span>
    </div>

    <div class="search_tap01 hide">
      <div class="search_box">
        <div class="search_l"><span>报道</span><i></i></div>
        <div class="search_r"><span>事件簿</span><span>万花筒</span><span class="active">人物志</span><span>档案馆</span><span>独唱团</span><span>同龄人</span></div>
      </div>

      <div class="search_box">
        <div class="search_l"><span>视频</span><i></i></div>
        <div class="search_r"><span>视频</span></div>
      </div>

      <div class="search_box">
        <div class="search_l"><span>发现</span><i></i></div>
        <div class="search_r"><span>发现</span></div>
      </div>

      <div class="search_box">
        <div class="search_l"><span>关于</span><i></i></div>
        <div class="search_r search_r2"><span>媒体报道</span><span>演讲集</span><span>编辑部的故事</span></div>
      </div>
    </div>


    <div class="search_tap02">
      <div class="search_main">
        <image src="/static/Rectangle 7.jpg" class="main_l" mode="widthFix" />
        <div class="main_r">
          <div class="main_rt">
            <span>魏紫钰</span>
            <em>主编</em>
            <p>这里是作者的简介这里是作者的简介这里是作者的简介这里是作者的简介</p>
          </div>

          <div class="main_rf">
            <span>Ta 的最新文章：</span>
            <p>李兰迪：演员未满<image src="/static/backh.svg" class="main_rfbt" mode="widthFix" /></p>
          </div>

        </div>
      </div>

       <div class="search_main">
        <image src="/static/Rectangle 7.jpg" class="main_l" mode="widthFix" />
        <div class="main_r">
          <div class="main_rt">
            <span>魏紫钰</span>
            <em>主编</em>
            <p>这里是作者的简介这里是作者的简介这里是作者的简介这里是作者的简介</p>
          </div>

          <div class="main_rf">
            <span>Ta 的最新文章：</span>
            <p>李兰迪：演员未满<image src="/static/backh.svg" class="main_rfbt" mode="widthFix" /></p>
          </div>

        </div>
      </div>

       <div class="search_main">
        <image src="/static/Rectangle 7.jpg" class="main_l" mode="widthFix" />
        <div class="main_r">
          <div class="main_rt">
            <span>魏紫钰</span>
            <em>主编</em>
            <p>这里是作者的简介这里是作者的简介这里是作者的简介这里是作者的简介</p>
          </div>

          <div class="main_rf">
            <span>Ta 的最新文章：</span>
            <p>李兰迪：演员未满<image src="/static/backh.svg" class="main_rfbt" mode="widthFix" /></p>
          </div>

        </div>
      </div>
      
    </div>


  </div>
</template>

<script>
export default {
  data () {
  },

  methods: {
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.back{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.search_top{ width: 88%;height:30px; display: block; float:left;margin:75px 6% 8px; border-bottom:1px solid #000000; }
.search_topbt{display: block;margin:0 4px 0 0;width:24px;height: 24px;float: left;}
.search_topi{display: block;margin:0 4px 0 0;width:280px;height: 20px; line-height: 20px; font-size: 14px; line-height: 20px; color: #000000;float: left;}
.search_nav{width: 88%;height:48px; display: block; float:left;margin:5px 6% 0; }
.search_nav span{width:auto;height:22px; display: block; float:left;margin:14px 24px 0 0; line-height: 22px; font-size: 14px; font-weight: bold; color: #000000; border-bottom:#ffffff 2px solid;padding: 1px; }
.search_nav span.active{ border-bottom-color: #F03838;}
.search_box{ width: 88%;height:auto; display: block; float:left;margin:20px 6% 30px; }
.search_l{ width:90px;height:auto; display: block; float:left; font-size: 14px; line-height: 20px;margin: 10px 0 0;}
.search_l span{  display: block; float:left; }
.search_l i{ width:48px;height:1px; background: rgba(0,0,0,.2); display: block; float:left; margin: 14px 0 0 12px;}
.search_r{ width:220px;height:auto; display: block; float:right; }
.search_r span{ width:50%;height:auto; display: block; float:left; font-size: 20px; line-height: 50px; Font-Family: Source Han Serif SC; color: #000000; }
.search_r span.active{ color: #F03838;}
.search_r2 span{ width:100%;}
.search_main{ width: 88%;height:auto; display: block; float:left;margin:20px 6% 25px;}
.main_l{width:42px;height:42px; display: block; float:left;}
.main_r{width:263px;height:auto; display: block; float:right;}
.main_rt{width:100%;height:auto; display: block; float:left;}
.main_rt span,.main_rt p,.main_rt em{width:100%;height:auto; display: block; float:left;}
.main_rt span{ font-size: 20px;line-height: 29px; color: #000000; font-family: Source Han Serif SC}
.main_rt em{ font-size: 12px; line-height: 17px; color:rgba(0,0,0,.4); font-family: PingFang SC}
.main_rt p{ font-size: 14px; line-height: 21px; color:rgba(0,0,0,.65); font-family: PingFang SC;margin: 5px 0 15px;}
.main_rf{width:100%;height:auto; display: block; float:left;}
.main_rf span{ font-size: 12px;line-height: 15px; color: rgba(0,0,0,.4);width:100%;height:auto; display: block; float:left;}
.main_rf p{ font-size: 14px;line-height: 17px; color: rgba(0,0,0,.65);width:100%;height:auto; display: block; float:left;}
.main_rfbt{ width:24px;height:24px; display: block; float:right;}
.hide{display: none;}
</style>